export default class DraggableButton {
    constructor(options) {
        const sys = uni.$u.sys();
        this.defaultOptions = {
            id: 'draggableButton',
            top: sys.statusBarHeight + 30,
            left: sys.screenWidth - 50,
            width: 30,
            height: 30,
            backgroundColor: '#C9C9C9',
            borderRadius: 15,
            innerColor: 'rgba(255,255,255,1)',
            innerRadius: 14,
            icon1: '/static/icon/webgengduo.png',
            icon2: '/static/icon/webfanhui.png',
            borderColor: '#C9C9C9',
            onClick: () => console.log('Button clicked!'),
            // onDragEnd: (x, y) => console.log(`New position: ${x}, ${y}`),
        };
        this.options = { ...this.defaultOptions, ...options };
        this.sys = sys;

        this.startX = 0;
        this.startY = 0;
        this.initialX = this.options.left;
        this.initialY = this.options.top;

        this.initButton();
    }

    initButton() {
        this.view = new plus.nativeObj.View(this.options.id, {
            top: this.options.top + 'px',
            left: this.options.left + 'px',
            height: this.options.height + 'px',
            width: this.options.width + 'px',
        });

        this.view.draw([
            {
                tag: 'rect',
                rectStyles: {
                    color: this.options.backgroundColor,
                    radius: this.options.borderRadius + 'px',
                },
                position: {
                    top: '0px',
                    left: '0px',
                    width: this.options.width + 'px',
                    height: this.options.height + 'px',
                },
            },
            {
                tag: 'rect',
                rectStyles: {
                    color: this.options.innerColor,
                    radius: this.options.innerRadius + 'px',
                },
                position: {
                    top: '1px',
                    left: '1px',
                    width: this.options.width - 2 + 'px',
                    height: this.options.height - 2 + 'px',
                },
            },
            // {
            //     tag: 'img',
            //     src: this.options.icon1,
            //     position: {
            //         top: '12px',
            //         left: '11px',
            //         width: '20px',
            //         height: '6px',
            //     },
            // },
            // {
            //     tag: 'rect',
            //     rectStyles: {
            //         color: this.options.borderColor,
            //     },
            //     position: {
            //         top: '4px',
            //         left: '42px',
            //         width: '1px',
            //         height: '22px',
            //     },
            // },
            {
                tag: 'img',
                src: this.options.icon2,
                position: {
                    top: '6px',
                    left: '6px',
                    width: '18px',
                    height: '18px',
                },
            },
        ]);
		
        this.attachEvents();
    }

    attachEvents() {
        this.view.addEventListener('touchstart', (e) => this.onTouchStart(e));
        this.view.addEventListener('touchmove', (e) => this.onTouchMove(e));
        // this.view.addEventListener('touchend', () => this.onTouchEnd());
        this.view.addEventListener('click', this.options.onClick, false);
    }

    onTouchStart(e) {
        this.startX = e.clientX;
        this.startY = e.clientY;
    }

    onTouchMove(e) {
        const deltaX = e.clientX - this.startX;
        const deltaY = e.clientY - this.startY;

        const newLeft = Math.max(0, Math.min(this.sys.screenWidth - this.options.width, this.initialX + deltaX));
        const newTop = Math.max(0, Math.min(this.sys.screenHeight - this.options.height, this.initialY + deltaY));

        this.view.setStyle({
            top: newTop + 'px',
            left: newLeft + 'px',
        });

        this.initialX = newLeft;
        this.initialY = newTop;
    }

    onTouchEnd() {
        this.options.onDragEnd(this.initialX, this.initialY);
    }

    setPosition(left, top) {
        this.initialX = Math.max(0, Math.min(this.sys.screenWidth - this.options.width, left));
        this.initialY = Math.max(0, Math.min(this.sys.screenHeight - this.options.height, top));
        this.view.setStyle({
            top: this.initialY + 'px',
            left: this.initialX + 'px',
        });
    }
	show() {
	    this.view.show();
	}
    hide() {
        this.view.hide();
    }
	close(){
		this.view.close();
	}
}
